<template>
  <div class="container">
    <top-nav :toLastPath="true">
      <div v-if="type=='personal'">身份证上传</div>
      <div v-else>营业执照上传</div>
    </top-nav>
    <div class="title">{{type=='personal' ? '请上传本人身份证正反面照片' :'请上传营业执照照片'}}</div>
    <van-uploader :after-read="uploadCardFront " class="idcard">
          <img v-lazy="cardFront.src" v-if="type=='personal'" :key="cardFront.src"/>
    </van-uploader>
    <van-uploader :after-read="uploadCardReverse" class="idcard">
      <img v-lazy="cardReverse.src" v-if="type=='personal'" :key="cardReverse.src"/>
    </van-uploader>
    <van-uploader :after-read="uploadEnterpriseFront" class="idcard">
      <img v-lazy="enterpriseFront.src" v-if="type!='personal'" :key="enterpriseFront.src"/>
    </van-uploader> 
    <div class="commit" @click="commit">
      <div :class="{blue:blue}">保存</div>
    </div>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
export default {
  data () {
    return {
      type:'',
    }
  },
  components:{
    topNav
  },
  computed: {
    blue(){
      if(this.cardFront.id!=""&&this.cardReverse.id!=""){
        return true
      }else if(this.enterpriseFront.id!=""){
        return true
      }else{
        return false
      }
    },
    cardFront:{
      get: function () {
        return this.$store.state.modulesMe.cardFront
      },
      set: function (newValue) {
        this.$store.dispatch('setCardFront',newValue)
      }
    },
    cardReverse:{
      get: function () {
        return this.$store.state.modulesMe.cardReverse
      },
      set: function (newValue) {
        this.$store.dispatch('setCardReverse',newValue)
      }
    },
    enterpriseFront:{
      get: function () {
        return this.$store.state.modulesMe.enterpriseFront
      },
      set: function (newValue) {
        this.$store.dispatch('setEnterpriseFront',newValue)
      }
    }
  },

  methods: {
    uploadCardFront(file) {//上传身份证正面
    let f=file.content;
    this.cardFront.src='https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/loading.svg'
    this.$axios.post(
      '/file/UploadBase64',
      {base_code:f}
    ).then((res)=>{
      this.cardFront.src=res.data.data.img_url
      this.cardFront.id=res.data.data.id
      })
    },

    uploadCardReverse(file) {//上传身份证反面
    let f=file.content;
    this.cardReverse.src='https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/loading.svg'
    this.$axios.post(
      '/file/UploadBase64',
      {base_code:f}     
    ).then((res)=>{
      this.cardReverse.src=res.data.data.img_url
      this.cardReverse.id=res.data.data.id
      })
    },

    uploadEnterpriseFront(file) {//上传公司营业执照
    let f=file.content;
    this.enterpriseFront.src='https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/loading.svg'
    this.$axios.post(
      '/file/UploadBase64',
      {base_code:f}  
    ).then((res)=>{
      this.enterpriseFront.src=res.data.data.img_url
      this.enterpriseFront.id=res.data.data.id
      })
    },
    commit(){
      if(this.blue){
        let arr=[]
        if(this.type=='personal'){
          arr.push(this.cardFront.id)
          arr.push(this.cardReverse.id)
        }else{
          arr.push(this.enterpriseFront.id)
        }
        this.$store.dispatch('setImageUpload',arr)
        this.$router.push(`/me/authentication/${this.type}`)
      }
    }
  },
  activated(){   
    this.type=this.$route.query.type
  }
}
</script>

<style scoped>
.title{width: 100%;line-height: 24px;text-align: center;font-size: 17px;color: #000000;margin-top:45px;}
img{width: 335px;height: 230px;margin: 10px 20px;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #D5D5DF 0%, #9292A2 100%);border-radius: 8px;margin: 12.5px auto;}
.commit div.blue{background-image:linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);}

.idcard{
  width:100%;
  display:flex;
  justify-content: center;
  align-content: center;
}
</style>
